<template>
  <page-container :scroll="false">
    <div class="flex-box">
      <div class="tree-nav">
        <el-form style="margin-bottom: 12px" @submit.prevent>
          <el-input placeholder="搜索申请类型" maxlength="10"> </el-input>
        </el-form>

        <vxe-table
          :data="data"
          border="none"
          size="mini"
          :row-config="{ isCurrent: true, isHover: true }"
          show-overflow
          :show-header="false"
          :tree-config="{
            expandAll: true,
            children: 'children',
            iconOpen: 'vxe-icon-square-minus',
            iconClose: 'vxe-icon-square-plus'
          }"
        >
          <vxe-column field="label" tree-node> </vxe-column>
        </vxe-table>
      </div>
      <div class="right-container">
        <vxe-table
          :data="showData"
          border="none"
          :row-config="{ isCurrent: true, isHover: true }"
          show-overflow
          stripe
        >
          <vxe-column type="checkbox" width="60"></vxe-column>
          <vxe-column title="编码" field="code"></vxe-column>
          <vxe-column title="名称" field="name">
            <template #default="{ row }">
              <el-link type="primary">{{ row.name }}</el-link>
            </template>
          </vxe-column>
          <vxe-column title="规格" field="size"></vxe-column>
          <vxe-column title="类型" field="type"></vxe-column>
          <vxe-column title="单位" field="unit"></vxe-column>
          <vxe-column title="市场单价" field="price"></vxe-column>
          <vxe-column title="状态" field="status"></vxe-column>
          <vxe-column title="操作" fixed="right" width="120" align="right">
            <template #default>
              <el-link class="tool-link" type="danger">编辑</el-link>
              <el-link class="tool-link" type="danger">删除</el-link>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </page-container>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  interface Tree {
    label: string;
    children?: Tree[];
  }

  const showData = ref([
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    },
    {
      name: '圆钢',
      code: 'LM2187987386148',
      type: '圆钢',
      size: 'HPB300Φ6.5',
      unit: '吨',
      price: '---',
      status: '启用'
    }
  ]);

  const data: Tree[] = [
    {
      label: '全部材料'
    },
    {
      label: '室内装饰类',
      children: [
        {
          label: '室内装饰'
        }
      ]
    },
    {
      label: '外墙装饰类',
      children: [
        {
          label: '外墙装饰类1'
        },
        {
          label: '外墙装饰类2'
        }
      ]
    },
    {
      label: '石材类',
      children: [
        {
          label: '石材类1'
        },
        {
          label: '石材类2'
        }
      ]
    },
    {
      label: '安装材料',
      children: [
        {
          label: '安装材料2'
        },
        {
          label: '安装材料1'
        }
      ]
    },
    {
      label: '化工（油漆/涂料/柴油/汽油/润滑油）类',
      children: [
        {
          label: '油漆'
        },
        {
          label: '涂料'
        }
      ]
    }
  ];
</script>

<style lang="less" scoped></style>
